<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">

        <!-- 其他代码省略 -->
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table row-key="index" :data="data" :columns="COLUMNS" :stripe="stripe" :bordered="bordered" :hover="hover"
          :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size"  :show-header="showHeader"
          cell-empty-content="-" resizable lazy-load @row-click="handleRowClick">
          <!-- 序号处理 -->
          <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
          <!--图片处理-->
          <template #image="{ row }">
            <div>
              <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                        <span>
                          <BrowseIcon size="1.4em" /> 预览
                        </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </div>
          </template>
          <!--价格处理-->
          <template #price="{ row }">{{ row.price.toFixed(2) }}</template>
          <!-- 操作栏 -->
          <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
        </t-table>
      <!-- 分页 -->
      <t-pagination
          v-if="total > 10"
          v-model="pagination.pageNum"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          @change="onPageChange"
        />

      </div>
    </div>
  </div>
</template>



<script lang="tsx" setup>
import { onMounted, ref } from 'vue';
import { TableProps } from 'tdesign-vue-next';
import { COLUMNS } from './constants';
import { getProjectList } from '@/api/serve';
//const data: TableProps['data'] = [{}];

var data = ref([])
var total = ref(0)
//分页对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  search()
}
//加载数据,发请求给后端
let search = async () => {
  let result = await getProjectList(pagination.value);
  data.value = result.data.records
  total.value = Number(result.data.total)
}


//生命周期
onMounted(() => {
  search()
})



const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref<TableProps['size']>('medium');
const showHeader = ref(true);

const handleRowClick: TableProps['onRowClick'] = (e) => {
  console.log(e);
};


</script>